<!--
 * @Descripttion: 通知通告
 * @version:
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-08-21 09:57:14
-->
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" label-width="90px" label-position="right">
          <el-form-item label="选择小区">
            <el-select
              v-model="filters.CID"
              filterable
              placeholder="请选择"
              clearable
              @change="refreshPageRequest(1)"
            >
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择状态">
            <el-select
              v-model="filters.auditType"
              filterable
              placeholder="请选择"
              clearable
              @change="refreshPageRequest(1)"
            >
              <el-option
                v-for="(item, index) in auditTypes"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="refreshPageRequest(1)" v-show="hasPerm('commadmin:wants:handle')">查询</el-button>
        <el-button type="primary" @click="handleEdit()" v-show="hasPerm('commadmin:wants:add')">新增</el-button>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column
            prop="photo"
            label="图片"
            width="100px"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.photo"
                :onerror="$errorImgUrl"
                style="width: 50px; height: 50px"
                v-image-preview
              />
            </template>
          </el-table-column>

          <el-table-column prop="name" label="申请人" show-overflow-tooltip width="150" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.name ? row.name : "-" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="content"
            label="内容"
            show-overflow-tooltip
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            show-overflow-tooltip
            width="150"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.phone ? row.phone : "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="insertTime" label="申请时间" align="center">
            <template slot-scope="scope">
              <span>{{ $format(scope.row.insertTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditType" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.auditType == 0">驳回</span>
              <span v-if="scope.row.auditType == 1">处理</span>
              <span v-if="scope.row.auditType == 2">未处理</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <div style="width: 200px; margin-top: 15px">
                <el-button
                  size="mini"
                  type="primary"
                  v-if="scope.row.auditType !== 1"
                  @click="handleGo(scope.row)"
                  v-show="hasPerm('commadmin:wants:dispose')"
                >处理</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  v-show="hasPerm('commadmin:wants:remove')"
                >删除</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleReply(scope.row)"
                  v-show="hasPerm('commadmin:wants:reply')"
                >回复</el-button>
                <el-badge
                  style="margin-left: 200px; margin-top: -60px"
                  :value="scope.row.propertyRead === 2 ? 'new' : ''"
                  :max="20"
                ></el-badge>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 审核 -->
        <div v-if="dialogTableVisible">
          <el-dialog
            title="审核验证"
            :close-on-click-modal="false"
            :visible.sync="dialogTableVisible"
            @close="closeDialog('formPass')"
          >
            <div class="addUser">
              <Examine :formPass="formPass" @getexam="closeDialog"></Examine>
            </div>
          </el-dialog>
        </div>
      </div>

      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <el-dialog
      class="dialog-container"
      title="新增"
      :visible.sync="editVisible"
      :modal-append-to-body="false"
    >
      <editPage
        v-if="editVisible"
        :forms="dataForm"
        @getexam="handleSave"
        @closeEdit="closeEdit"
        @clickCancel="handleCancel"
      ></editPage>
    </el-dialog>

    <el-dialog
      class="dialog-container"
      title="消息"
      :visible.sync="addVisible"
      :modal-append-to-body="false"
    >
      <addPage v-if="addVisible" :dataForms="dataForm" @refresh="handleQuery"></addPage>
    </el-dialog>
  </div>
</template>

<script>
import editPage from './editor'
import addPage from './editorxy'
import Examine from './examine'

export default {
  components: {
    Examine,
    editPage,
    addPage
  },
  data() {
    return {
      errorImg: 'this.src="' + require('@/assets/imgs/houtai/wutu.png') + '"', //默认图片
      auditTypes: [{ name: '已处理', value: 1 }, { name: '未处理', value: 2 }],
      // 待审核
      loading: true,
      // 弹框
      dialogTableVisible: false,
      // 默认图片
      imgs: require('@/assets/imgs/houtai/wutu.png'),

      // 家庭成员
      tableData: [],
      // 查询返回
      asideShow: false,
      unitShow: false,
      pageResult: [],
      getCommunity: [],
      filters: {
        CID: '',
        auditType: 2
      },
      pageRequest: {
        page: 1,
        limit: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      exportUrl: this.global.baseUrl + '/self_test_stat/export',
      exportLoading: false,
      // 一户一档列表
      oneHouseList: [],
      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      editVisible: false,
      addVisible: false,
      // 新增编辑界面数据
      dataForm: {
        text: '',
        name: '',
        title: ''
      },
      repairs: []
    }
  },
  mounted() {
    this.filters.CID = localStorage.getItem('home_CID')
    this.repairs = JSON.parse(sessionStorage.getItem('dictData')).sys_report_repair
    this.handleQuery()
    this.getCommunityList()
  },
  methods: {
    //新增
    handleEdit(row) {
      this.editVisible = true
      this.operation = false
      // this.dataForm = JSON.parse(JSON.stringify(row));
    },
    closeDialog() {
      this.dialogTableVisible = false
      this.handleQuery()
    },
    // 查询一户
    handleQuery(val) {
      var that = this
      let param = {
        page: val ? '' : this.pageRequest.page,
        limit: val ? '' : this.pageRequest.limit
      }
      let params = Object.assign(param, this.filters)

      let paramJson = JSON.stringify(params)
      this.loading = true
      this.$api.wxNotic.sys_wish_list(paramJson).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.pageResult = res.data
          this.totalSize = res.count
          //   item.photos = this.global.baseUrlImage + "avatar/" + item.photo;
          this.pageResult.map(item => {
            item.photo = this.global.baseUrlImage + 'avatar/' + item.img[0]
            item.insertTime = this.$format(item.insertTime)
            // that.repairs.forEach(val => {
            //   if (item.type == val.DID) item.title = val.name;

            // });
          })
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
        }
      })
    },
    handleGo(row) {
      this.formPass = Object.assign({}, row)
      this.dialogTableVisible = true
    },
    //删除
    handleDelete(row) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // let params = this.getDeleteIds([], row);
        let params = {
          _id: row._id,
          dbName: 'community_wish'
        }
        var paramJson = JSON.stringify(params)
        this.$api.wxNotic.remove_every(paramJson).then(res => {
          if (res.code == 0) {
            this.handleQuery()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '操作失败, ' + res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    //获取小区的列表选择器
    getCommunityList() {
      let params = {}
      params = {
        where: {
          CODES: []
        }
      }
      let param = JSON.stringify(params)
      this.loading = true
      this.$api.three.communityList(params).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.getCommunity = res.data
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
        }
      })
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val
      this.handleQuery()
    },

    handleSave: function() {
      this.editVisible = false
      this.handleQuery()
    },
    handleReply(row) {
      this.addVisible = true
      this.dataForm = JSON.parse(JSON.stringify(row))
    },
    /* 保存成功关闭编辑弹窗 */
    closeEdit: function() {
      this.editVisible = false
      // this.handleQuery()

      //设置重新加载路由及资源
      // store.commit("menuRouteLoaded", false)
    },

    /* 取消编辑 */
    handleCancel: function() {
      this.editVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.item {
  right: 20px;
  top: 10px;
  position: absolute;
}
</style>
